<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-小案例</title>
  <style>
    .outer{
      width: 400px;
      height: 224px;
      position: relative;
      /* 子元素若超过父元素 */
      overflow: hidden;
    }
    
    .mask{
      width: 400px;
      height: 224px;
      /* 透明度 */
      opacity: 0;
      /* 字体居中 */
      line-height: 224px;
      text-align: center;
      font-size: 100px;
      transition: 1s all linear;
      position: absolute;
      background-color: black;
      color: white;
      left: 0;
      top: 0;
      cursor: pointer;
    }
    img{
      transition: 1s all linear;
    }
    .outer:hover .mask{
      opacity: 0.5;
    }
    .outer:hover img{
      transform: scale(1.3);
    }
  </style>
</head>
<body>
  <div class="outer">
    <img src="../../images/shanghai.jpg" alt="">
    <div class="mask">上海</div>
  </div>
  
</body>
</html>